<template>
    <a-modal :keyboard="false" :maskClosable="false" title="分类编辑" :open="visible" :width="700" :confirmLoading="loading" centered @ok="handleSubmit" @cancel="handleCancel">
        <a-form layout="vertical">
            <a-row :gutter="16" type="flex" justify="start">
                <a-col :xs="24" :sm="24" :md="24">
                    <a-form-item label="名称" v-bind="validateInfos.name">
                        <a-input v-model:value="modelRef.name" />
                    </a-form-item>
                </a-col>
                <a-col :xs="24" :sm="24" :md="24">
                    <a-form-item label="状态" v-bind="validateInfos.status">
                        <a-radio-group v-model:value="modelRef.status">
                            <a-radio :value="1">启用</a-radio>
                            <a-radio :value="0">停用</a-radio>
                        </a-radio-group>
                    </a-form-item>
                </a-col>
            </a-row>
        </a-form>
    </a-modal>
</template>

<script lang="ts">
import type { PropType } from 'vue';
import { defineComponent, reactive, ref, watchEffect, watch } from 'vue';
import { Form, message } from 'ant-design-vue';
import { createOrderSensitive, updateOrderSensitive } from '@/api/order/sensitive';
import { cloneDeep, isEmpty, isUndefined } from 'lodash-es';

export default defineComponent({
    props: {
        visible: {
            type: Boolean,
            required: true,
        },
        model: {
            type: Object as PropType<any>,
            default: () => null,
        },
    },
    emits: ['cancel', 'success'],
    setup(props, { emit }) {
        const loading = ref(false);
        const defaultForm = {
            status: 1,
            name: '',
        };
        const modelRef = reactive<any>(cloneDeep(defaultForm));

        const rulesRef = reactive({
            name: [{ required: true, message: '请输入名称' }],
        });
        const { validateInfos, resetFields, validate } = Form.useForm(modelRef, rulesRef);

        // 记录初始值
        const initValues = reactive({});
        watch(
            () => props.visible,
            () => {
                Object.assign(initValues, cloneDeep(props.model));
            },
        );
        watchEffect(() => {
            if (props.visible) {
                if (props.model) {
                    Object.assign(modelRef, props.model);
                    // Object.assign(modelRef, props.model);
                    // 这一步可以不用，直接传递 model.permissions 到页面进行渲染
                    // 这里重新组装是为了演示结构不相同情况下可以按照下列方案组装结构
                }
            }
        });

        const handleCancel = () => {
            resetFields();
            Object.keys(modelRef).forEach(key => {
                delete modelRef[key];
            });
            Object.assign(modelRef, cloneDeep(defaultForm));

            modelRef.status = 1;
            emit('cancel');
        };

        const handleSubmit = async () => {
            validate().then(() => {
                loading.value = true;

                (isUndefined(modelRef.id) ? createOrderSensitive : updateOrderSensitive)({
                    ...(modelRef as any),
                })
                    .then(res => {
                        if (res.data) {
                            message.success('操作成功');
                            emit('success');
                            handleCancel();
                        }
                    })
                    .finally(() => {
                        loading.value = false;
                    });
            });
        };
        return {
            loading,

            modelRef,
            validateInfos,
            resetFields,

            handleSubmit,
            handleCancel,
            initValues,
            isEmpty,
        };
    },
    components: {},
});
</script>
